<template>
    <div class="pwd-box">
        <el-form ref="ruleFormRef" :model="form" label-width="100px" :rules="rules">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="form.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="QQ" prop="qq">
                <el-input v-model="form.qq" />
            </el-form-item>
            <el-form-item label="Email" prop="email">
                <el-input v-model="form.email" placeholder="请输入Email" />
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="submitForm(ruleFormRef)">
                    保存
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
const ruleFormRef = ref(null)
const form = reactive({
    name:'',
    phone:'',
    qq:'514514514',
    email:'',
})
const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' },],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' },],
    qq: [{ required: true, message: '请输入qq', trigger: 'blur' },],
    email: [{ required: true, message: '请输入Email', trigger: 'blur' },],
})

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!')
        }
    })
}
</script>
<style lang="less" scoped>
.pwd-box {
    padding: 20px;
    border: 1px solid #ddd;
}

.el-input {
    width: 300px;
}
</style>